.portal-header-toolbar {
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
    z-index   : 8;

    .neo-button {
        &:not(:first-child) {
            margin-left: 10px;
        }

        &.no-text {
            margin-left: 0;
            width      : 1.2em;

            &.github-button {
                margin-left: 5em;
            }

            .neo-button-glyph {
                font-size: 24px;
            }
        }

        .neo-button-glyph {
            &.neo-logo-blue {
                background-image   : url("../../../../../../resources/images/logo/neo_logo_primary.svg");
                background-position: center center;
                background-repeat  : no-repeat;
                background-size    : contain;
                height             : 24px;
                min-height         : 24px;
                min-width          : 24px;
                width              : 24px;
            }
        }
    }

    .separate-bar {
        animation     : fade-in-animation 200ms linear;
        box-shadow    : 0 5px 10px rgba(0,0,0,.3);
        flex-direction: column;
        position      : absolute;
        right         : 0;
        top           : 58px;
        z-index       : 9;

        &.hide-sidebar {
            animation: fade-out-animation 200ms linear forwards;
        }
    }

    // find parallel class hide-sidebar
    &:has(+div .hide-sidebar) .separate-bar {
        animation: fade-out-animation 200ms linear forwards;
    }
}

.logo-container {
    animation: fade-and-scale-animation auto linear;
    animation-timeline: --page-scroll;
}

.portal-home-maincontainer {
    scroll-timeline: --page-scroll block;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fade-and-scale-animation {
    0% {
        opacity  : 1;
        transform: scale(1);
    }
    12%, 100% {
        opacity  : 0;
        transform: scale(1.5);
    }
}

@keyframes fade-in-animation {
    from {
        opacity: 0;
        right  : -30px
    }
    to {
        opacity: 1;
        right  : 0;
    }
}

@keyframes fade-out-animation {
    from {
        opacity: 1;
        right  : 0;
    }
    to {
        opacity: 0;
        right  : -30px
    }
}

.button-group {
    overflow: visible;
}

.get-started-button {
    opacity  : 0;
    animation: show-get-started-button 400ms 1300ms linear forwards;
}

.neo-github {
    opacity  : 0;
    animation: show-github-button 600ms 1150ms linear forwards;
}

@keyframes show-get-started-button {
    from {
        opacity  : 0;
        transform: translate(70px, 30px);
    }
    to {
        opacity  : 1;
        transform: translate(0, 0);
    }
}

@keyframes show-github-button {
    from {
        opacity  : 0;
        transform: translate(-70px, 50px);
    }
    to {
        opacity  : 1;
        transform: translate(0, 0);
    }
}
